<template>
	<image src="/static/image/12.png" mode="widthFix" class="bg"></image>
	<u-navbar
	title="订单详情"
	:autoBack="true"
	:background="{
	background:'transparent'
	}"
	:border-bottom="false"
	titleSize="28rpx" titleColor="#333"
	back-icon-color="#333"
	:isFixed="false"
	/>
	
	
	<view class="" v-if="order">
		<view class="container">
			<view class="card">
				<image src="/static/image/13.png" mode="widthFix" class="img"></image>
				<view class="content cf">
					<view class="f36 bold">
						{{statusLabel[order.orderInfo.status]}}
					</view>
					<view class="t-flex between mt10">
						<view class="">
							订单号
						</view>
						<view class="">
							{{order.orderInfo.order_sn}}
						</view>
					</view>
				</view>
			</view>
			
			
			
			<view class="bgf p30 r20 mt20">
				<view class="goods t-flex between">
					<uv-image :src="$str.img(order.orderInfo.good_image)" mode="aspectFill"
					width="200rpx"
					height="160rpx"
					radius="20rpx"
					></uv-image>
					<view class="right">
						<view class="f32 c3 bold">
							{{order.orderInfo.good_name}}
						</view>
						<view class="mt20">
							<text class="prc f32 bold">￥{{order.orderInfo.good_info.price}}</text> <text class="mprc ml20 bold">￥{{order.orderInfo.good_info.marketprice}}</text>
						</view>
					</view>
				</view>
				
				<view class="mt20 tright t-flex between">
					<view class="f24 c9">
						{{$time(order.orderInfo.createtime,5)}}
					</view>
					<view class="">
						小计：￥{{order.orderInfo.payamount}}
					</view>
				</view>
				
				
				
			</view>
			
			<view class="bgf p30 r20 mt20">
				<view class="user t-flex">
					<uv-image :src="$str.avatar(order.orderInfo.user_avatar)" mode="aspectFill"
					width="90rpx"
					height="90rpx"
					radius="50%"
					></uv-image>
					<view class="f30 c3 bold ml30">
						{{order.orderInfo.username}}
					</view>
					<view class="f30 c3 bold ml30">
						{{order.orderInfo.phone}}
					</view>
				</view>
				<view class="t-flex between mt30">
					<view class="c6">
						陪驾时间：
					</view>
					<view class="c3">
						{{order.waitToServer.length?order.waitToServer[0].yy_time:'用户暂未预约时间'}}
					</view>
				</view>
				<view class="t-flex between mt20">
					<view class="c6">
						车辆信息：
					</view>
					<view class="c3">
						{{order.orderInfo.car_type_name}}/{{order.orderInfo.car_dl_name}} <text class="tag ml10">{{order.orderInfo.car_pre==1?'师傅备车':'用户自备'}}</text>
					</view>
				</view>
				<view class="t-flex between mt20">
					<view class="c6">
						上门地点：
					</view>
					<view class="c3" style="width: 70%;text-align:right;">
						{{order.orderInfo.address}}
					</view>
				</view>
			</view>
			
			
			
			<view class="bgf p30 r20 mt20">
				<view class="f32 c3 bold">
					订单信息
				</view>
				
				<view class="li t-flex between mt20">
					<view class="c6">创建时间</view>
					<view class="c3">
						{{$time(order.orderInfo.createtime,5)}}
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">支付时间</view>
					<view class="c3">
						{{ order.orderInfo.paytime?$time(order.orderInfo.paytime,5):'未支付'}}
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">订单金额</view>
					<view class="c3">
						{{order.orderInfo.payamount}}
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">现金券</view>
					<view class="c3">
						-￥{{order.orderInfo.shippingfee.yhq_price}}
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">助力减免</view>
					<view class="c3">
						-￥{{order.orderInfo.shippingfee.zl_price}}
					</view>
				</view>
				<view class="li t-flex between mt20" v-if="order.orderInfo.is_buy_bx == 1">
					<view class="c6">保险金额</view>
					<view class="c3">
						￥{{order.orderInfo.shippingfee.bx_price}}
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">付款方式</view>
					<view class="c3">
						微信
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">支付金额</view>
					<view class="c3">
						￥{{order.orderInfo.payamount}}
					</view>
				</view>
			</view>
			
			<view class="bgf p30 r20 mt20" v-if="order.waitToServer[0]?.ht_info">
				<view class="f32 c3 bold mb20">
					合同
				</view>
				<fileBox :shoeClose="false" :list="[{url:order.waitToServer[0].ht_info}]"></fileBox>
			</view>
			
		</view>
		<view class="bpad"></view>
		
		
		<view class="Allbottom t-flex center safeArea" v-if="order.waitToServer.length && !order.waitToServer[0].ht_info">
			<view class="btn t-flex center cf f30" @click="uploadOptionE.open()">上传合同</view>
		</view>
	</view>
	<loading v-else></loading>
	<uploadOption @success="confirm" ref="uploadOptionE"></uploadOption>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { orderDetail, uploadHt } from "../../../api";
import { useStore } from '../../../store';
import { showToast } from '../../../lib/ts/util';
	
	const uploadOptionE = ref()
	const store = useStore()
	let statusLabel = ['待付款','待服务','待评价','支付取消','待服务取消','已评价']
	onLoad(options=>{
		getdata(options.id)
	})
	
	let order = ref()
	const getdata = async (id:number)=>{
		let res = await orderDetail(id)
		//等待服务的课程
		res.waitToServer = res.orderGoodsInfo.filter(item=>item.sf_user_id == store.userinfo.id && item.yy_time_id && !item.is_hx)
		res.orderInfo.shippingfee = JSON.parse(res.orderInfo.shippingfee)
		order.value = res
	}
	
	
	const confirm = async (ht_info)=>{
		let res = await uploadHt({
			order_detail_id:order.value.waitToServer[0].id,
			ht_info
		})
		showToast(res.msg)
		getdata(order.value.orderInfo.id)
		uni.$emit('orderPageOnPullDownRefresh')
	}

</script>

<style scoped lang="scss">
	.bg{
		width: 100%;
		position: absolute;
	}
	.container{
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 2;
	}
	
	.card{
		position: relative;
		.img{
			width: 100%;
		}
		.content{
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			padding: 0 30rpx;
			padding-top: 36rpx;
			.right{
				border-radius: 200rpx;
				height: 70rpx;
				width: 160rpx;
			}
		}
	}
	
	
	.goods{
		.right{
			width: calc(100% - 230rpx);
			.prc{
				color: #FF1616;
			}
			.mprc{
				color: #BBBBBB;
				text-decoration: line-through;
			}
		}
	}
	
	.tright{
		text-align: right;
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		.bottomcontent{
			justify-content: flex-end;
			padding: 24rpx 30rpx;
			width: 100%;
			.btn{
				padding: 0 24rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 35rpx;
				box-sizing: border-box;
				margin-left: 24rpx;
			}
			.s1{
				color: #666;
				border: 2rpx solid #EEEEEE;
			}
			.s2{
				background-color: $main-color;
				color: #fff;
			}
		}
	}
	
	.ath{
		padding: 20rpx 30rpx;
		.icon{
			width: 48rpx;
			height: 48rpx;
		}
		color: #804101;
		.iconfont{
			color: #999;
		}
	}
	
	.contract{
		width: 160rpx;
	}
	
	.tag{
		font-size: 20rpx;
		color: #FFA000;
		background: rgba(255,160,0,0.14);
		padding: 4rpx 14rpx;
		border-radius: 8rpx;
	}
</style>
